<template>
  <div class="city-list">
    
    <div class="city-list-item" v-for="item in cityList" :key="item.cityCode">
      <div class="city">
        <el-link
            :underline="false"
            @click="selectCity(item)"
          >
        {{ item.nameabbrevation }}
        </el-link>
      </div>
      <div class="city-childs">
        <div v-for="ite in item.child" :key="ite.cityCode" class="city-childs-item">
          <el-link
            :underline="false"
            @click="selectCity(ite)"
          >
            {{ ite.nameabbrevation }}
          </el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cityList: null,
      selectedCity: null,
    }
  },
  methods: {
     // 行政区划，根据关键字查询行政区划信息；包括名称、类型（省市）、范围等
    searchGovernment () {

      let that = this;
      $.ajax({
        url: '/tdt/administrative',
        type: 'get',
        async: false,
        contentType: "application/json;charset=UTF-8", //指定消息请求类型
        data: {
          // 注意参数格式
          postStr: JSON.stringify({
            // 关键字
            "searchWord": '156000000',
            "searchType": '0',
            // 子项
            "needSubInfo": 'false',
            // 所有属性
            "needAll": 'true',
            // 边界属性，好像是不起作用
            "needPolygon": 'true',
            "needPre": 'true',
          }),
          type: 'query',
          // 请更换自己的 tk，此 tk 只能在当前域名下使用
          tk: '9aa421bfac4b31f0ad91a7118973689d',
        },
        // 请求前处理事项
        beforeSend: function () {
        },
        success: function (res, status) {

          res = JSON.parse(res);
          console.log('所有城市列表：', res)
          that.cityList= res.data.child.sort((city1, city2) => {
            return parseInt(city1.cityCode) - parseInt(city2.cityCode);
          });
          console.log(that.cityList)
        },
      });
    },
    selectCity (city) {
      this.selectedCity = city;
      console.log('选中：', this.selectedCity);
    }
  },
  created () {
    // console.log('created:', this.cityList)
  },
  mounted () {
      this.searchGovernment();
    // console.log('mounted:', this.cityList)
  },
  beforeMount () {
    this.searchGovernment();
    // console.log('beforeMount:', this.cityList)
  }

}
</script>

<style lang="scss" scoped>
.city-list {
  height: 400px;
  width: 300px;
  border: 1px solid black; 
  overflow: auto;overflow-x: hidden;
}

.city-list-item {
  width: 100%; 
  display: flex;
}

.city {
  width: 30%;
  height: 100%;
  padding: 5px;
}

.city-childs {
  width: 70%;
  height: 100%;
}

.city-childs-item {
  float: left;
  padding: 5px;
}
</style>